<!doctype html>
<html lang="en" id="index" v-cloak>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <title>爱的约定</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <link rel="stylesheet" href="lib/weui/dist/style/weui.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/uc_signRecord.css">
</head>
<body>
<div class='common-header'>
    <div class='left'>
        <a href="javascript:history.back()">
            <i class='iconfont icon-left'></i>
        </a>
    </div>
    <div class="middle">
        签到记录
    </div>
    <div class="right"><a href=""></a></div>
</div>
<div class="record">
    <p>你已连续签到了<span class="red">1</span>天，当前每天获得魅力值</p>
    <p class="red charm-value">30</p>
    <div class="calendar">
        <div class="today clearfix">
            <span id="today"></span>
            <span class="pull-right">今天已有<span class="num">340</span>人签到</span>
        </div>
        <div class="content" id="content">
        </div>
    </div>
    <div class="sing-caption">
        <h5>签到说明</h5>
        <p>连续签到7天，第一天奖励10点魅力值，第二天到第六天每天递增多送10点，第七天及之后每天奖励100点。</p>
    </div>
</div>
<script type="text/javascript">
    function showCalendar(_year, _month, _day, firstDay) {
        var i = 0,
            monthDay = 0,
            showStr = "",
            _classname = "",
            today = new Date();
        //月份的天数
        switch (_month) {
            case 1:
                monthDay = 31;
                break;
            case 2:
                if (runNian(_year)) {
                    monthDay = 29;
                }
                else {
                    monthDay = 28;
                }
                break;
            case 3:
                monthDay = 31;
                break;
            case 4:
                monthDay = 30;
                break;
            case 5:
                monthDay = 31;
                break;
            case 6:
                monthDay = 30;
                break;
            case 7:
                monthDay = 31;
                break;
            case 8:
                monthDay = 31;
                break;
            case 9:
                monthDay = 30;
                break;
            case 10:
                monthDay = 31;
                break;
            case 11:
                monthDay = 30;
                break;
            case 12:
                monthDay = 31;
                break;
        }

        //输出日历表格，这部分因结构而异
        showStr = "<table class='cld-w'><thead>";
        //日历头部
        //showStr += "<tr><th colspan='7'><div class='cld-hd'><span class='cld-pre'>&lt;</span><em id='showDate' value='" + _year + "-" + _month + "-" + _day + "'>" + _year + "年" + _month + "月" + _day + "日" + "</em><span class='cld-next'>&gt;</span></div></th></tr>";
        //日历星期
        showStr += "<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>";
        showStr += "</thead><tbody><tr>";
        //当月第一天前的空格
        for (i = 1; i <= firstDay; i++) {
            showStr += "<td></td>";
        }
        //显示当前月的天数
        for (i = 1; i <= monthDay; i++) {
            //当日的日期
            if (_year === today.getFullYear() && _month === today.getMonth() + 1 && i === today.getDate()) {
                _classname = "cld-cur";
            }
            //当日之前的日期（这个判断是因为我有工作需求，就是要求之前的日期不能点击）
            else if (_year < today.getFullYear() || (_year === today.getFullYear() && _month <= today.getMonth()) || (_year === today.getFullYear() && _month === today.getMonth() + 1 && i < today.getDate())) {
                _classname = "cld-old";
            }
            //其他普通的日期
            else {
                _classname = "cld-day";
            }
            //其他大于当月的月份的相同日期（为了让点击下一月的时候，相同的日期增加cld-cur类）
            if (_day === i && (_year > today.getFullYear() || _month > today.getMonth() + 1)) {
                _classname = "cld-cur";
            }
            //把日期存在对应的value
            showStr += "<td class=" + _classname + " value='" + _year + "-" + _month + "-" + i + "'>" + i + "</td>";

            firstDay = (firstDay + 1) % 7;
            if (firstDay === 0 && i !== monthDay) {
                showStr += "</tr><tr>";
            }
        }

        //剩余的空格
        if (firstDay !== 0) {
            for (i = firstDay; i < 7; i++) {
                showStr += "<td></td>";
            }
        }

        showStr += "</tr></tbody></table>";
        //插入calendar的页面结构里
        calendar.innerHTML = showStr;
    };
    function getFirstDay(_year,_month) {
        var allDay = 0, y = _year-1, i = 1;
        allDay = y + Math.floor(y/4) - Math.floor(y/100) + Math.floor(y/400) + 1;
        for ( ; i<_month; i++) {
            switch (i) {
                case 1: allDay += 31; break;
                case 2:
                    if(runNian(_year)) { allDay += 29; }
                    else { allDay += 28; }
                    break;
                case 3: allDay += 31; break;
                case 4: allDay += 30; break;
                case 5: allDay += 31; break;
                case 6: allDay += 30; break;
                case 7: allDay += 31; break;
                case 8: allDay += 31; break;
                case 9: allDay += 30; break;
                case 10: allDay += 31; break;
                case 11: allDay += 30; break;
                case 12: allDay += 31; break;
            }
        }
        return allDay%7;
    };
    //判断闰年
    function runNian(_year) {
        if(_year%400 === 0 || (_year%4 === 0 && _year%100 !== 0) ) {
            return true;
        }
        else { return false; }
    };
    var calendar = document.createElement('div');
    calendar.setAttribute('id','showCld');
    document.getElementById("content").appendChild(calendar); //增加到你的box里
    //获取当天的年月日
    var today = new Date();
    var _year = today.getFullYear(),
            _month = today.getMonth() + 1,
            _day = today.getDate();
    var firstDay = getFirstDay(_year, _month);
    //显示日历
    showCalendar(_year, _month, _day, firstDay);
    document.getElementById('today').innerHTML = _year + "-" + _month + "-" + _day;
</script>
</body>
</html>